<template>
  <div ref='swiper' :class="[direction == 'horizontal' ? 'swiper' : 'swiper vertical']" @touchstart="ontouchstart" @touchmove="ontouchmove" @touchend="ontouchend">
    <ul :style="style">
      <li :style="{width:width+'px'}" :class="{active: curr+1==index}" v-for="(item,index) in list" :key="index">
        <slot :item="item">
          <img :src="item">
        </slot>
      </li>
    </ul>
    <div class="cir" v-if="direction=='horizontal'">
      <a :class="{on: curr+1==index}" href="javascript:;" v-for="index of count" :key="index"></a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'swiperLoop',
  data(){
    return{
      style:{},
      width:'',
      height:'',
      startX:0,
      startY:0,
      offset:0,
      curr:0,
      threshold:10,
      duration:900,
      count:0,
      timer:null
    }
  },
  props: {
    list:Array,
    direction: {
      default:'horizontal'
    },
    auto:{
      type:Boolean,
      default:false
    },
  },
  methods:{
    ontouchstart(e){
      clearInterval(this.timer)
      this.startX = e.changedTouches[0].pageX
      this.startY = e.changedTouches[0].pageY

      this.$set(this.style,'transition','none')
    },
    ontouchmove(e){
      let moveX = e.changedTouches[0].pageX,
        moveY = e.changedTouches[0].pageY,
        distance= 0,transform = 0,distanceX = moveX - this.startX,distanceY = moveY - this.startY

      if (this.direction === 'horizontal' && Math.abs(distanceX)>Math.abs(distanceY)) {
        distance = distanceX
        transform = 'translate3d(' + (distance - this.offset) + 'px, 0, 0)'
      }else if(this.direction!='horizontal' && Math.abs(distanceY)>Math.abs(distanceX)){
        distance = distanceY
        transform = 'translate3d(0, ' + (distance - this.offset) + 'px, 0)'
      }else{
        return
      }

      this.$set(this.style,'transform',transform)
      e.preventDefault()
    },
    ontouchend(e){
      let endX = e.changedTouches[0].pageX,
        endY = e.changedTouches[0].pageY,
        distance = endY - this.startY

      if (this.direction === 'horizontal') {
        distance = endX - this.startX
      }

      if (distance > this.threshold) {
        this.curr = this.curr === 0 ? -1 : --this.curr
      } else if (distance < -this.threshold) {
        this.curr = this.curr < this.count ? ++this.curr : this.count
      }

      this.show(this.curr)
      this.timer=this.autoPlay()
    },
    show(idx){
      this.offset = (idx+1) * this.height
      var transform = 'translate3d(0, -' + this.offset + 'px, 0)'
      if (this.direction === 'horizontal') {
        this.offset = (idx+1) * this.width
        transform = 'translate3d(-' + this.offset + 'px, 0, 0)'
      }

      let duration = this.duration + 'ms'
      this.$set(this.style,'transition',duration)
      this.$set(this.style,'transform',transform)
    },
    autoPlay(){
      if(this.auto){
        return setInterval(()=>{
          this.show(++this.curr)
        },4000)
      }
    }
  },
  mounted(){
    this.count=this.list.length-2
    this.width=this.$refs.swiper.offsetWidth
    this.height=this.$refs.swiper.offsetHeight
    this.offset=this.height
    this.$set(this.style,'width',this.width+'px')
    this.$set(this.style,'height',this.height+'px')
    let transform='translate3d(0,'+(-this.offset)+'px,0)'
    if(this.direction=="horizontal"){
      this.threshold=50
      this.duration=300
      this.offset=this.width
      this.$set(this.style,'width',this.width*(this.count+2)+'px')
      this.$set(this.style,'height','auto')
      transform='translate3d('+(-this.offset)+'px,0,0)'
    }
    this.$set(this.style,'transform',transform)
    
    this.$refs.swiper.addEventListener('webkitTransitionEnd', (e)=>{
      if(this.curr>=this.count){
        this.offset=this.height
        transform='translate3d(0,'+(-this.offset)+'px,0)'
        if(this.direction=="horizontal"){
          this.offset=this.width
          transform='translate3d('+(-this.offset)+'px,0,0)'
        }
        this.$set(this.style,'transition','none')
        this.$set(this.style,'transform',transform)
        this.curr=0
      }
      if(this.curr==-1){
        this.offset=this.count*this.height
        transform='translate3d(0,'+(-this.offset)+'px,0)'
        if(this.direction=="horizontal"){
          this.offset=this.count*this.width
          transform='translate3d('+(-this.offset)+'px,0,0)'
        }
        this.$set(this.style,'transition','none')
        this.$set(this.style,'transform',transform)
        this.curr=this.count-1
      }
      e.preventDefault()
    }, false)
    // 自动轮播
    this.timer=this.autoPlay()
  }
}
</script>

<style lang="less" scoped>
.swiper{overflow:hidden;position:relative;}
.swiper ul li{float:left;width:100%;}
.swiper ul li img{width:100%}
.swiper ul li a{height: 100%;display: block;}
.swiper .cir{position:absolute;left:50%;transform:translate3d(-50%,0,0);bottom:5px}
.swiper .cir a{display:inline-block;width:10px;height:10px;margin:0 5px;background:#000;opacity:.5;border-radius:50%}
.swiper .cir a.on{background:#ddd;opacity:0.8}
/* 竖屏切换 */
.swiper.vertical,.swiper.vertical ul,.swiper.vertical li{height:100%;}
</style>
